<template>
	<div class="phb_box" >
		<div class="box">
			<div class="top_kp_list_box" v-for="item in tabsList" :key="item.name">
				<div class="list" @click="qie_phb(ite.id)" v-for="ite in item.children" :key="item.id">
					<img :src="listnum !== ite.id ? ite.imgUrl : ite.activeImgUrl" alt="">
					<img :src="xsj" class="xsj" alt="" v-if="listnum === ite.id">
				</div>
			</div>

			<div class="xl_box">
				<el-dropdown size="large" placement="bottom" @command="(e: number) => { handleCommand(e, 'timeFlg') }">
					<div class="xlbox">{{ timeFlgName }}</div>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item :command="1">周榜</el-dropdown-item>
							<el-dropdown-item :command="2">月榜</el-dropdown-item>
							<el-dropdown-item :command="0">日榜</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<el-dropdown size="large" placement="bottom"
					@command="(e: number) => { handleCommand(e, 'queryType') }">
					<div class="xlbox">{{ queryTypeName }}</div>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item :command="1">个人榜</el-dropdown-item>
							<el-dropdown-item :command="2">组榜</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
			<div class="list_box">
				<div class="list_box_top">
					<!-- 第一名 -->
					<div class="top1_box">
						<img class="top1_box_tx" src="@/assets/images/phb/mrtx.png" alt="">
						<img class="top1_box_txbj" src="@/assets/images/phb/wg1.png" alt="">
						<div class="mctx_box">
							<img class="mctx_box_dym" src="@/assets/images/phb/dym.png" alt="">
							<div class="mz_sl">
								<div class="name">{{ list1.stageName }}</div>
								<div class="sl" v-if="listnum == 1">
									<span class="sl_label">上品: </span>
									<span class="sl_value">{{ list1.upperNum?list1.upperNum:0 }}</span>
									<span class="sl_label"> 爆品: </span>
									<span class="sl_value">{{ list1.hotNum?list1.hotNum:0 }}</span>
								</div>
								<div class="sl" v-if="listnum == 2">
									<span class="sl_label">过审数据: </span>
									<span class="sl_value">{{ list1.oneTimeAuthPassedCount?list1.oneTimeAuthPassedCount:0 }}</span>
								</div>
								<div class="sl" v-if="listnum == 3">
									<span class="sl_label">添加商品: </span>
									<span class="sl_value">{{ list1.newProductCount?list1.newProductCount:0 }}</span>
								</div>
								<div class="sl" v-if="listnum == 4">
									<span class="sl_label">过审: </span>
									<span class="sl_value">{{ list1.authPassedCount?list1.authPassedCount:0 }}</span>
								</div>
								<div class="sl" v-if="listnum == 5">
									<span class="sl_label">送审: </span>
									<span class="sl_value">{{ list1.pushAuthCount?list1.pushAuthCount:0 }}</span>
								</div>
								<div class="sl" v-if="listnum == 6">
									<span class="sl_label">卷品: </span>
									<span class="sl_value">{{ list1.involutionNum?list1.involutionNum:0 }}</span>
								</div>
							</div>
						</div>
					</div>
					<div :class='{ pm_list: true, bjm2: jsranking(index) == 2, bjm3: jsranking(index) == 3, bjm410: jsranking(index) > 3 && jsranking(index) < 11, bjm11: jsranking(index) > 10 }'
						v-for="(item, index) in listData">
						<!-- 二三名用图片后面用文字 drm    第三名 dsm-->
						<img src="@/assets/images/phb/drm.png" alt="" class="drm" v-if="jsranking(index) == 2">
						<img src="@/assets/images/phb/dsm.png" alt="" class="drm" v-if="jsranking(index) == 3">
						<div class="pm" v-if="jsranking(index) > 3">TOP{{ jsranking(index) }}</div>
						<div class="tx">
							<img src="@/assets/images/phb/mrtx.png" alt="" class="tximg">
							<!-- 王冠 二三名用  wg2   wg3 -->
							<img src="@/assets/images/phb/wg2.png" class="xk" alt="" v-if="jsranking(index) == 2">
							<img src="@/assets/images/phb/wg3.png" class="xk" alt="" v-if="jsranking(index) == 3">
						</div>
						<div class="name">{{ item.stageName }}</div>
						<div class='sj' v-if="listnum == 1">
							<span class="sj_label">上品: </span>
							<span class="sj_value">{{ item.upperNum?item.upperNum:0 }}</span>
							<span class="sj_label"> 爆品: </span>
							<span class="sj_value">{{ item.hotNum?item.hotNum:0 }}</span>
						</div>
						<div class='sj' v-if="listnum == 2">
							<span class="sj_label">过审数据: </span>
							<span class="sj_value">{{ item.oneTimeAuthPassedCount?item.oneTimeAuthPassedCount:0 }}</span>
						</div>
						<div class='sj' v-if="listnum == 3">
							<span class="sj_label">添加商品: </span>
							<span class="sj_value">{{ item.newProductCount?item.newProductCount:0 }}</span>
						</div>
						<div class='sj' v-if="listnum == 4">
							<span class="sj_label">过审: </span>
							<span class="sj_value">{{ item.authPassedCount?item.authPassedCount:0 }}</span>
						</div>
						<div class='sj' v-if="listnum == 5">
							<span class="sj_label">送审: </span>
							<span class="sj_value">{{ item.pushAuthCount?item.pushAuthCount:0 }}</span>
						</div>
						<div class='sj' v-if="listnum == 6">
							<span class="sj_label">卷品: </span>
							<span class="sj_value">{{ list1.involutionNum?item.involutionNum:0 }}</span>
						</div>
					</div>
				</div>
				<div class="list_box_pagination">
					<el-pagination background size="large" v-model:page-size="queryParams.pageSize"
						v-model:current-page="queryParams.pageNum" layout="prev, pager, next" :total="tableTotal"
						@change="paginationChange" />
				</div>
			</div>
		</div>
		<div class="zzc" v-if="jzloading">
			<div class="classhe" >
				加载中请稍后...
			</div>
		</div>
		<div class="zzc" v-if="loading">
			<div class="classhe" >
				加载中请稍后...
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { type Action } from 'element-plus'
import { auditStatusNameById, handleEditPermission } from '@/utils/auditStatusFilter'
import { removeInvalidNodes } from '@/utils/index'
import {
	upperRanking, upperRankingfirst,
	oneTimeAuthPassRanking, oneTimeAuthPassRankingfirst,
	newProductRanking, newProductRankingfirst,
	authPassRanking, authPassRankingfirst,
	pushAuthRanking, pushAuthRankingfirst,
	involutionRanking, involutionRankingfirst,
} from '@/api/group/list/index'
const list11 = new URL("@/assets/images/phb/list11.png", import.meta.url).href;
const list12 = new URL("@/assets/images/phb/list12.png", import.meta.url).href;
const list21 = new URL("@/assets/images/phb/list21.png", import.meta.url).href;
const list22 = new URL("@/assets/images/phb/list22.png", import.meta.url).href;
const list31 = new URL("@/assets/images/phb/list31.png", import.meta.url).href;
const list32 = new URL("@/assets/images/phb/list32.png", import.meta.url).href;
const list41 = new URL("@/assets/images/phb/list41.png", import.meta.url).href;
const list42 = new URL("@/assets/images/phb/list42.png", import.meta.url).href;
const list51 = new URL("@/assets/images/phb/list51.png", import.meta.url).href;
const list52 = new URL("@/assets/images/phb/list52.png", import.meta.url).href;
const list61 = new URL("@/assets/images/phb/list61.png", import.meta.url).href;
const list62 = new URL("@/assets/images/phb/list62.png", import.meta.url).href;
const xsj = new URL("@/assets/images/phb/xsj.png", import.meta.url).href;

const tabsList = ref<Array<any>>([
	{
		name: '一排',
		children: [{
			id: 1,
			imgUrl: list11,
			activeImgUrl: list12
		}, {
			id: 2,
			imgUrl: list21,
			activeImgUrl: list22
		}, {
			id: 3,
			imgUrl: list31,
			activeImgUrl: list32
		}]
	}, {
		name: '二排',
		children: [{
			id: 4,
			imgUrl: list41,
			activeImgUrl: list42
		}, {
			id: 5,
			imgUrl: list51,
			activeImgUrl: list52
		}, {
			id: 6,
			imgUrl: list61,
			activeImgUrl: list62
		}]
	}
])
// 计时器倒计时时间   默认三十秒
const settime = ref(30000);
//计时器
const jsqzt = ref<any>(null);
const loading = ref(true)//加载中
const jzloading = ref(false)//加载中


//分页相关
const tableTotal = ref(0) // 总条数
//搜索条件和页码
const queryParams = ref({
	pageNum: 1,
	pageSize: 3,
	timeFlg: 1,
	queryType: 1,
})
const timeFlgName = ref<string>('周榜')
const queryTypeName = ref<string>('个人榜')

/** 页数变化 */
const paginationChange = async () => {
	clearTimeout(jsqzt.value);
	await getList();
}
// 计算排名
const jsranking = (index: number) => {
	let i = 2;
	return (queryParams.value.pageNum - 1) * queryParams.value.pageSize + index + i;
};
// 计算倒计时
const jsdjs = async () => {
	clearTimeout(jsqzt.value);
	jsqzt.value = setTimeout(async () => {
		clearTimeout(jsqzt.value);
		let i = Math.ceil(tableTotal.value / queryParams.value.pageSize)
		if (i == queryParams.value.pageNum) { //已经是最后一页了。
			queryParams.value.pageNum = 1;
			tableTotal.value = 0;
			if (listnum.value == 6) {
				listnum.value = 1;
			} else {
				listnum.value = listnum.value + 1;
			}
			await getList();
		} else {//继续往下翻页
			queryParams.value.pageNum = queryParams.value.pageNum + 1;
			await getList();
		}
	}, settime.value)

};
const listData = ref<Array<any>>([])//列表数据
const list1 = ref<any>({});//第一名
// 查询列表数据
const getList = async () => {
	loading.value = true;
	listData.value = [];
	list1.value = [];
	let res;//列表数据
	let res2;//第一名数据
	// if(queryParams.value.pageNum == 1){queryParams.value.pageSize = 4}else{queryParams.value.pageSize = 3}
	if (listnum.value == 1) { // 上品/爆品榜单
		try {
			res = await upperRanking(queryParams.value)
			
			if(res.rows.length == 0){// 如果这个榜单没有数据的话长度为0 跳转下一个榜单
				qie_phb(2);
			}
			listData.value = res.rows;
			tableTotal.value = res.total - 1;
			res2 = await upperRankingfirst(queryParams.value)
			list1.value = res2.data
			jsdjs();
		} catch (e) {
			loading.value = false;
			console.log('我走了报错1')
			jzloading.value = true;
			setTimeout(()=>{
				qie_phb(2);
				jzloading.value = false;
			},5000)
		} finally {
			loading.value = false;
			console.log('我走了报错2')
		}
	}
	if (listnum.value == 2) { // 一次性过审榜单
		try {
			res = await oneTimeAuthPassRanking(queryParams.value)
			
			if(res.rows.length == 0){// 如果这个榜单没有数据的话长度为0 跳转下一个榜单
				qie_phb(3);
			}
			listData.value = res.rows;
			tableTotal.value = res.total - 1;
			res2 = await oneTimeAuthPassRankingfirst(queryParams.value)
			list1.value = res2.data
			jsdjs();
		} catch (e) {
			loading.value = false;
			console.log('我走了报错1')
			jzloading.value = true;
			setTimeout(()=>{
				qie_phb(3);
				jzloading.value = false;
			},5000)
		} finally {
			loading.value = false;
			console.log('我走了报错2')
		}
	}
	if (listnum.value == 3) { // 新品榜
		try {
			res = await newProductRanking(queryParams.value)
			
			if(res.rows.length == 0){// 如果这个榜单没有数据的话长度为0 跳转下一个榜单
				qie_phb(4);
			}
			listData.value = res.rows;
			tableTotal.value = res.total - 1;
			res2 = await newProductRankingfirst(queryParams.value)
			list1.value = res2.data
			jsdjs();
		} catch (e) {
			loading.value = false;
			console.log('我走了报错1')
			jzloading.value = true;
			setTimeout(()=>{
				qie_phb(4);
				jzloading.value = false;
			},5000)
		} finally {
			loading.value = false;
			console.log('我走了报错2')
		}
	}
	if (listnum.value == 4) { // 过审
		try {
			res = await authPassRanking(queryParams.value)
			
			if(res.rows.length == 0){// 如果这个榜单没有数据的话长度为0 跳转下一个榜单
				qie_phb(5);
			}
			listData.value = res.rows;
			tableTotal.value = res.total - 1;
			res2 = await authPassRankingfirst(queryParams.value)
			list1.value = res2.data
			jsdjs();
		} catch (e) {
			loading.value = false;
			console.log('我走了报错1')
			jzloading.value = true;
			setTimeout(()=>{
				qie_phb(5);
				jzloading.value = false;
			},5000)
		} finally {
			loading.value = false;
			console.log('我走了报错2')
		}
	}
	if (listnum.value == 5) { // 送审
		try {
			res = await pushAuthRanking(queryParams.value)
			
			if(res.rows.length == 0){// 如果这个榜单没有数据的话长度为0 跳转下一个榜单
				qie_phb(6);
			}
			listData.value = res.rows;
			tableTotal.value = res.total - 1;
			res2 = await pushAuthRankingfirst(queryParams.value)
			list1.value = res2.data
			jsdjs();
		} catch (e) {
			loading.value = false;
			console.log('我走了报错1')
			jzloading.value = true;
			setTimeout(()=>{
				qie_phb(6);
				jzloading.value = false;
			},5000)
		} finally {
			loading.value = false;
			console.log('我走了报错2')
		}
	}
	if (listnum.value == 6) { // 卷品
		try {
			res = await involutionRanking(queryParams.value)
			if(res.rows.length == 0){// 如果这个榜单没有数据的话长度为0 跳转下一个榜单
				qie_phb(1);
			}
			listData.value = res.rows;
			tableTotal.value = res.total - 1;
			res2 = await involutionRankingfirst(queryParams.value)
			list1.value = res2.data
			jsdjs();
		} catch (e) {
			loading.value = false;
			console.log('我走了报错1')
			jzloading.value = true;
			setTimeout(()=>{
				qie_phb(1);
				jzloading.value = false;
			},5000)
		} finally {
			loading.value = false;
			console.log('我走了报错2')
		}
	}
	loading.value = false;
	
}

// 展示那个排行榜  1 -6
const listnum = ref(1)
// 点击按钮切换
const qie_phb = async (i: number) => {
	listnum.value = i;
	clearTimeout(jsqzt.value);
	queryParams.value.pageNum = 1;
	tableTotal.value = 0;
	await getList();
}

const handleCommand = async (command: number, key: string) => {
	if (key === 'timeFlg') {
		queryParams.value.timeFlg = command
		timeFlgName.value = command === 1 ? '周榜' : command === 2 ? '月榜' : '日榜'
	} else {
		queryParams.value.queryType = command
		queryTypeName.value = command === 1 ? '个人榜' : '组榜'
	}
	qie_phb(listnum.value)
}

onMounted(async () => {
	await getList()
})
</script>

<style lang="scss" scoped>
.zzc{
	.classhe{
		width: 300px;
		background-color: #fff;
		padding: 40px 0;
		text-align: center;
		border-radius:5px;
	}
	background-color: rgba(0, 0, 0, .4);
	width: 100vw;
	height: 100vh;
	position: fixed;
	top:0;
	left: 0;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
}
:deep(.el-loading-mask) {
	height:2000px;
}
:deep(.number) {
	background-color: #262D7D !important;
	color: #FFFFFF;
}

:deep(.is-active) {
	background-color: #3943BF !important;
	color: #FFFFFF;
}

:deep(.btn-quicknext) {
	background-color: #262D7D !important;
	color: #FFFFFF;
}

:deep(.btn-quickprev) {
	background-color: #262D7D !important;
	color: #FFFFFF;
}

:deep(.btn-prev) {
	background-color: #262D7D !important;
	color: #FFFFFF !important;
}

:deep(.btn-next) {
	background-color: #262D7D !important;
	color: #FFFFFF !important;
}

:deep(.el-pagination__total) {
	color: #929292;
}

:deep(.el-pagination__goto) {
	color: #929292;
}

:deep(.el-pagination__classifier) {
	color: #929292;
}

:deep(.phb_box .pagination-container) {
	padding: 0 !important;
}

.phb_box {
	min-width: 1050px;
	width: 100%;
	height: 100%;
	overflow: auto;
	font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
	background: #18134B;
	display: flex;
	justify-content: center;
	box-sizing: border-box;

	&::-webkit-scrollbar {
		display: none;
	}

	.box {
		padding-top: 60px;
		max-width: 1080px;
		min-height: 1750px;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-flow: column;
		box-sizing: border-box;

		.top_kp_list_box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			background-image: url('../../../assets/images/phb/icon_tabsBj.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			margin-bottom: 30px;
			padding: 0 25px 25px;
			box-sizing: border-box;

			.list {
				width: 32.5%;
				position: relative;

				img {
					width: 100%;
					cursor: pointer;
				}

				.xsj {
					width: 43px;
					height: 29px;
					position: absolute;
					bottom: -40px;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.xl_box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 111px;
			margin-bottom: 35px;
			box-sizing: border-box;

			.xlbox {
				width: 300px;
				height: 100px;
				background-image: url('../../../assets/images/phb/icon_xialabj.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				line-height: 93px;
				text-align: center;
				font-size: 28px;
				color: #fff;
			}
		}

		.list_box {
			flex: 1;
			min-height: 0;
			overflow: hidden;
			margin: 0 20px 20px;
			padding: 50px 40px 0;
			background-image: url('../../../assets/images/phb/icon_listBj.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			box-sizing: border-box;
			display: flex;
			flex-flow: column;



			.list_box_top {
				flex: 1;
				min-height: 0;
				overflow-y: auto;

				&::-webkit-scrollbar {
					display: none;
				}

				.top1_box {
					width: 100%;
					margin-top: 35px;
					display: flex;
					flex-flow: column;
					align-items: center;
					position: relative;

					.top1_box_tx {
						width: 200px;
						height: 200px;
						border-radius: 50%;
						position: relative;
					}

					.top1_box_txbj {
						width: 250px;
						height: 250px;
						position: absolute;
						top: -20px;
						left: 50%;
						transform: translateX(-50%);
						z-index: 1;
					}

					.mctx_box {
						width: 100%;
						height: 360px;
						padding: 80px 35px 0;
						display: flex;
						align-items: center;
						background-image: url('../../../assets/images/phb/top1.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;

						.mctx_box_dym {
							width: 184px;
							height: 127px;
							margin-right: 15px;
						}

						.mz_sl {
							.name {
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								font-weight: bold;
								font-size: 87px;
								color: #FFFFFF;
								margin-bottom: 15px;
							}

							.sl {
								color: #FFFFFF;

								.sl_label {
									font-size: 38px;
								}

								.sl_value {
									font-size: 49px;
								}
							}
						}





					}






				}

				.pm_list {
					width: 100%;
					margin-top: 15px;
					position: relative;
					height: 182.64px;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					display: flex;
					align-items: center;
					padding-right: 40px;

					.pm {
						width: 106px;
						margin-left: 60px;
						margin-right: 40px;
						font-size: 25px;
						font-weight: 600;
						color: #FFFFFF;
					}

					.sj {
						width: 335px;
						font-weight: 500;
						color: #FFFFFF;
						text-align: right;

						.sj_label {
							font-size: 26px;
						}

						.sj_value {
							font-size: 33px;
						}
					}

					.name {
						font-weight: bold;
						font-size: 30px;
						color: #FFFFFF;
						width: 280px;
					}

					.tx {
						.xk {
							width: 136.76px;
							height: 136.76px;
							position: absolute;
							top: -15px;
							left: -15px;
							z-index: 2;
						}

						.tximg {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;
						}

						width: 106.53px;
						height: 106.53px;
						margin-right: 35px;
						position:relative;
					}

					.drm {
						width: 106px;
						height: 98px;
						margin-left: 60px;
						margin-right: 40px;
						margin-top: 10px;
					}
				}

				.bjm2 {
					background-image: url('../../../assets/images/phb/bjm2.png');
				}

				.bjm3 {
					background-image: url('../../../assets/images/phb/bjm3.png');
				}

				.bjm410 {
					background-image: url('../../../assets/images/phb/bjm410.png');
				}

				.bjm11 {
					background-image: url('../../../assets/images/phb/bjm11.png');
				}
			}

			.list_box_pagination {
				width: 100%;
				height: 80px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>